<template>
  <!-- 首页 -->
  <div class="home">
    <!-- 首页搜索框 -->
    <van-search
      v-model="searchVal"
      disabled
      placeholder="请输入搜索关键词"
      shape="round"
      @click="$router.push('/home/searchPopup')"
    />
    <!-- 搜索的点击占位符 -->
    <transition name="van-slide-right">
      <router-view> </router-view>
    </transition>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#39a9ed">
      <van-swipe-item v-for="e in banner" :key="e.id">
        <img
          :src="e.image_url"
          width="100%"
          alt=""
          :style="{ display: 'block' }"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 图标导航 -->
    <van-grid :column-num="5">
      <van-grid-item
        :icon="e.icon_url"
        :text="e.name"
        v-for="e in channel"
        :key="e.id"
      />
    </van-grid>

    <!-- 制造商 -->
    <div class="brand">
      <div class="home_title">品牌制造商直供</div>
      <ul>
        <li v-for="e in brandList" :key="e.id">
          <img :src="e.pic_url" alt="" />
          <h4>{{ e.name }}</h4>
          <p>{{ e.floor_price | RMB }}</p>
        </li>
      </ul>
    </div>

    <!-- 新品首发 -->
    <div class="new">
      <div class="home_title">周一周四·新品首发</div>
      <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="e in newGoodsList" :key="e.id">
          <van-image :src="e.list_pic_url" />
          <h3 class="new_h3">{{ e.name }}</h3>
          <p class="new_p">{{ e.retail_price | RMB }}</p>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 人气推荐 -->
    <div class="hot">
      <div class="home_title">人气推荐</div>
      <van-card
        v-for="e in hotGoodsList"
        :key="e.id"
        :price="e.retail_price.toFixed(2)"
        :desc="e.goods_brief"
        :title="e.name"
        :thumb="e.list_pic_url"
      />
    </div>

    <!-- 专题精选 -->
    <div class="special">
      <div class="home_title">专题精选</div>
      <van-swipe :loop="false" :width="300" :show-indicators="false">
        <van-swipe-item v-for="e in topicList" :key="e.id">
          <img :src="e.scene_pic_url" alt="" />
          <div class="special_title">
            <h4>{{ e.title }}</h4>
            <span>{{ e.price_info | RMB }}</span>
          </div>
          <p>{{ e.subtitle }}</p>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 分类 -->
    <div class="new" v-for="(e, i) in categoryList" :key="e.id">
      <div class="home_title">{{ e.name }}</div>
      <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="e in categoryList[i].goodsList" :key="e.id">
          <van-image :src="e.list_pic_url" />
          <h3 class="new_h3">{{ e.name }}</h3>
          <p class="new_p">{{ e.retail_price | RMB }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import { GetHomeData } from "@/request/api";
export default {
  name: "Home",
  data() {
    return {
      searchVal: "",
      // 轮播图数据
      banner: [],
      // 图标导航数据
      channel: [],
      // 制造商数据
      brandList: [],
      // 新品首发数据
      newGoodsList: [],
      // 人气推荐数据
      hotGoodsList: [],
      // 专题精选数据
      topicList: [],
      // 分类数据
      categoryList: [],
    };
  },
  created() {
    GetHomeData()
      .then((res) => {
        // console.log("then", res.data.categoryList);
        // 轮播图
        this.banner = res.data.banner;
        // 图标导航
        this.channel = res.data.channel;
        // 制造商
        this.brandList = res.data.brandList;
        // 新品首发
        this.newGoodsList = res.data.newGoodsList;
        // 人气推荐
        this.hotGoodsList = res.data.hotGoodsList;
        // 专题精选
        this.topicList = res.data.topicList;
        // 分类
        this.categoryList = res.data.categoryList;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  components: {},
};
</script>

<style lang = "less" scoped>
/* 公共样式 */
.home_title {
  width: 100%;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.14rem;
}

/* 制造商 */
.brand {
  width: 100%;
  background-color: #fff;
  margin-top: 0.2rem;
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 49%;
      h4,
      p {
        position: absolute;
        left: 0.1rem;
        top: 0.1rem;
        font-size: 0.14rem;
      }
      p {
        top: 0.4rem;
        color: darkred;
      }
      img {
        width: 100%;
      }
    }
  }
}

/* 新品首发 */
.new {
  background-color: #fff;
  margin-top: 0.2rem;
  .new_h3,
  .new_p {
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.14rem;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
  }
  .new_p {
    color: darkred;
  }
}

/* 人气推荐 */
.hot {
  background-color: #fff;
  margin-top: 0.2rem;
  .van-card__price {
    color: darkred;
  }
}

/* 专题精选 */
.home {
  padding-bottom: 0.6rem;
}
.special {
  background-color: #fff;
  margin-top: 0.2rem;
  .special_title {
    line-height: 0.4rem;
  }
  img {
    width: 100%;
    height: 2rem;
  }
  p {
    width: 90%;
    font-size: 0.14rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #666;
  }
  h4 {
    display: inline-block;
  }
  span {
    color: darkred;
  }
  .van-swipe-item {
    padding: 0.04rem;
  }
}

/* 搜索点击时的动画效果(vue自带的) */
/* .right-enter,
.right-leave-to {
  right: -100%;
}
.right-enter-active,
.right-leave-active {
  transition: right 0.4s;
}
.right-enter-to,
.right-leave {
  right: 0;
} */
</style>